// components/UserForm.tsx
import React, { useEffect,useState } from 'react';
import {
  Box, TextField, Button, MenuItem, FormControlLabel,
  Checkbox, Paper, Typography, Stack
} from '@mui/material';

type UserFormProps = {
   user?: any;
  onSubmit: (user: any) => void;
  onCancel: () => void;
};


const defaultForm = {
  userId: '',
  name: '',
  department: '',
  role: ''
};
const roles = ['系统管理员', '评估管理员', '数据分析师', '评估专员'];
const departments = ['IT部门', '财务部', '销售部', '战略部'];

const UserCRUDForm: React.FC<UserFormProps> = ({ user,onSubmit, onCancel }) => {
 const [formData, setFormData] = useState(defaultForm);
  // ✅ 监听 user 变化后更新 formData
  useEffect(() => {
    if (user) {
      setFormData(user);
    } else {
      setFormData(defaultForm);
    }
  }, [user]);
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData(prev => ({ ...prev, enabled: e.target.checked }));
  };

  const handleSubmit = () => {
    onSubmit(formData);
  };

  return (
    <Paper sx={{ backgroundColor: '#102840', p: 3, borderRadius: 2 }}>
      <Typography variant="h6" sx={{ color: '#90CAF9', mb: 2 }}>
        ➕ 创建用户
      </Typography>

      <Box display="flex" flexDirection="column" gap={2}>
        <TextField
          label="用户ID"
          name="userId"
          value={formData.userId}
          onChange={handleChange}
          fullWidth
          InputLabelProps={{ sx: { color: '#90CAF9' } }}
          InputProps={{ sx: { color: '#fff' } }}
        />

        <TextField
          label="姓名"
          name="name"
          value={formData.name}
          onChange={handleChange}
          fullWidth
          InputLabelProps={{ sx: { color: '#90CAF9' } }}
          InputProps={{ sx: { color: '#fff' } }}
        />

        <TextField
          select
          label="所属部门"
          name="department"
          value={formData.department}
          onChange={handleChange}
          fullWidth
          InputLabelProps={{ sx: { color: '#90CAF9' } }}
          InputProps={{ sx: { color: '#fff' } }}
        >
          {departments.map(dep => (
            <MenuItem key={dep} value={dep}>{dep}</MenuItem>
          ))}
        </TextField>

        <TextField
          select
          label="角色"
          name="role"
          value={formData.role}
          onChange={handleChange}
          fullWidth
          InputLabelProps={{ sx: { color: '#90CAF9' } }}
          InputProps={{ sx: { color: '#fff' } }}
        >
          {roles.map(role => (
            <MenuItem key={role} value={role}>{role}</MenuItem>
          ))}
        </TextField>

        <FormControlLabel
          control={
            <Checkbox
              checked={formData.enabled}
              onChange={handleCheckboxChange}
              sx={{ color: '#90CAF9' }}
            />
          }
          label={<Typography sx={{ color: '#fff' }}>启用</Typography>}
        />

        <Stack direction="row" spacing={2}>
          <Button variant="contained" onClick={handleSubmit} sx={{ backgroundColor: '#2962FF' }}>
            保存
          </Button>
          <Button variant="contained" onClick={onCancel} sx={{ backgroundColor: '#616161' }}>
            取消
          </Button>
        </Stack>
      </Box>
    </Paper>
  );
};

export default UserCRUDForm;
